// @ts-nocheck
import React, { Fragment, useEffect, useState } from 'react';
import { Typography, Divider, Space, NavBar, ShareSheet } from 'react-vant';
import { Rate, ProgressBar, Toast, Button } from 'antd-mobile';
import CountUp from 'react-countup';
import jwtDecode from 'jwt-decode';
import {
  Arrow,
  ChatO,
  FireO,
  BrowsingHistory,
  Chat,
  PointGiftO,
  Like,
} from '@react-vant/icons';
import server from '@/utlis/server';
import { history } from 'umi';
import aa from '../../static/852.png';
import bb from '../../static/963.png';
import cc from '../../static/741.png';
import dd from '../../static/485.png';
import ff from '../../static/346.png';
import qq from '../../static/12.png';
import ww from '../../static/13.png';
import ee from '../../static/14.png';
import rr from '../../static/15.png';

import zz from '../../static/77.png';
import xx from '../../static/88.png';
import ll from '../../static/99.png';
import vv from '../../static/66.png';

import mm from '../../static/123.png';
import jja from '../../static/456.png';

import jka from '../../static/256.png';

import bxqyy from '../../static/56898.png';
import './style.less';
import './index.less';
// import '@/pages/golobo.less';
import 'lib-flexible';

const content =
  '在四面环海、风景如画的阿伦黛尔王国，生活着两位可爱美丽的小公主，艾莎和安娜。艾莎天生具捉厚晚有制造冰雪的能力，随着年龄的增长，她的能力越来越强，甚至险些夺走妹妹的生命。为此国王紧闭宫束戏签门，也中断了两姐妹的联系。悲哀的海屑桨阀验难过后，艾莎 （ 伊迪娜·门泽尔 配音）终于到了加冕的年龄，各国王公危艰和齐来祝贺。艾莎战战兢兢，唯恐被人识破隐藏了多年的秘密。然而当听说安娜 （ 克里斯汀·贝尔 配音）将要和初次见面的南埃尔斯王子汉斯 （誉乃府盛 圣蒂诺·方塔纳 配音）结婚时，依然情绪失控露出了马脚。在此之后她逃到山中，构建了属于自己的冰雪王国，而阿伦黛尔也陷入可怕的寒冷之中。安娜独自来到山中，在山民克里斯托弗 （ 乔纳森·格罗夫 配音匪芝愚）的帮助下总算来到姐姐的宫殿，但能否帮助国家找回绿意依然是个未知数。';

export default function index(props) {
  //返回电影购票页面
  let dygp = () => {
    history.push('/films');
  };

  //点击跳转视频页面
  let vid = (item) => {
    if (item.pre_id) {
      history.push({
        pathname: '/video',
        state: {
          _id: item._id,
        },
      });
    } else {
      Toast.show({
        icon: 'fail',
        content: '该电影没有预告',
      });
    }

    // history.push('/video');
  };
  // 电影信息
  const [oneplay, setoneplay] = useState({});
  // 演员列表
  const [actordata, setactordata] = useState([]);
  // 图片列表
  const [images, setimages] = useState([]);
  // 视频推荐
  const [videos, setvides] = useState([]);
  // 想看列表
  let [liklook, setliklook] = useState([]);
  // 获取电影信息
  let getoneplay = async () => {
    let id = props.location.state._id;

    let { data } = await server.get('/oneplay?id=' + id);
    // console.log(data.data);

    setoneplay(data.data);
    setactordata(data.data.actor);
    setimages(data.imgs);
    setvides(data.videos);
    setliklook(data.liklooks);
  };
  // 展示星星
  let forma = (num) => {
    let newarr = [];
    for (let i = 1; i <= num; i++) {
      newarr.push(i);
    }
    let arr = newarr.sort((a, b) => {
      return b - a;
    });

    return arr.map((item, index) => {
      return (
        <Fragment key={index}>
          <Rate readOnly allowHalf value={item}></Rate>
        </Fragment>
      );
    });
  };
  // 展示进度条
  let forjindu = (num) => {
    let newarr = [];
    for (let i = 1; i <= num; i++) {
      newarr.push(i);
    }
    let arr = newarr.sort((a, b) => {
      return b - a;
    });

    return arr.map((item, index) => {
      return (
        <Fragment key={index}>
          <ProgressBar percent={item * 10} rounded={true} />
        </Fragment>
      );
    });
  };

  let nummap = (mm) => {
    let num = Number(mm);
    return num.toFixed(1);
  };
  // 判断当前电影是否在想看列表
  let isinliklook = () => {
    // console.log(liklook);
    let token = localStorage.getItem('token');
    if (token) {
      let user = jwtDecode(token)._doc;

      let newarr = liklook.filter((item) => {
        return (item.paly_id == oneplay._id) & (item.user_id == user._id);
      });
      // console.log(newarr, '113');

      if (newarr.length != 0) {
        return true;
      } else {
        return false;
      }
    } else {
      history.push('/login');
    }
  };
  // 想看点击事件
  let liklookclick = (type) => {
    let token = localStorage.getItem('token');
    if (token) {
      let user = jwtDecode(token)._doc;

      server
        .post('/editliklook', {
          id: oneplay._id,
          type,
          userid: user._id,
        })
        .then((value) => {
          getoneplay();
        });
    } else {
      Toast.show({
        icon: 'fail',
        content: '请先登录',
      });
      history.push('/login');
    }
  };
  useEffect(() => {
    getoneplay();
    // setliklook(localStorage.getItem('liklook') || "")
  }, []);
  return (
    <div
      className="ctop"
      style={{ width: '100%', height: '44.6rem', backgroundColor: '#182037' }}
    >
      <div className="fh" style={{ width: '100%', height: '1rem' }}>
        <div className="htl">
          <NavBar title="详情页面" leftText="返回" onClickLeft={dygp} />
        </div>
      </div>
      <div className="nr" style={{ width: '100%', height: '5rem' }}>
        <img
          style={{
            width: '3.5rem',
            height: '4.3rem',
            marginTop: '0.5rem',
            borderRadius: '0.2rem',
            marginLeft: '0.3rem',
          }}
          src={oneplay.image}
          alt=""
          onClick={() => {
            vid(oneplay);
          }}
        />
        <div className="titles">
          <h2 className="nmyg"> {oneplay.name}</h2>

          {/* 介绍 */}
          <div className="oneplaysele">
            <p>{oneplay.self}</p>
          </div>
          <div className="gpa">
            <h3
              className="gpas"
              style={{ marginLeft: '0.5rem', textAlign: 'center' }}
            >
              想看
            </h3>
            <p
              className="xinxin"
              style={{
                textAlign: 'center',
                marginTop: '-0.9rem',
                marginLeft: '-1rem',
                color: isinliklook() ? 'red' : '',
              }}
            >
              <Like
                onClick={() => {
                  let isin = isinliklook();
                  if (isin) {
                    liklookclick('-');
                  } else {
                    liklookclick('+');
                  }
                }}
              />
            </p>
          </div>
        </div>
      </div>
      <div
        className="pf"
        style={{
          width: '100%',
          height: '3rem',
          backgroundColor: '#182037',
          marginTop: '0.5rem',
        }}
      >
        <div className="playtop">
          <div className="playtop_title">
            <span>猫眼购票评分</span>
          </div>
          <div className="playtop_num">
            <span>
              <CountUp start={0} end={oneplay.liklook} elay={1} />
              人想看
            </span>
            <span>
              <CountUp start={0} end={oneplay.islook} elay={1} />
              人看过
            </span>
          </div>
        </div>
        <div className="playnum">
          <p>{nummap(oneplay.pin_numL)}</p>
          <div className="playnumreat">
            <div className="xinxin">{forma(4)}</div>
            <div className="playjidu">{forjindu(oneplay.pin_numL)}</div>
          </div>
        </div>
      </div>
      <div
        className="cd"
        style={{
          width: '100%',
          height: '1rem',
          color: 'white',
          marginTop: '0.2rem',
        }}
      >
        <p
          style={{
            marginBottom: '0.4rem',
            fontSize: '0.6rem',
            marginLeft: '15px',
          }}
        >
          <PointGiftO />
        </p>
        <p
          style={{
            fontSize: '0.4rem',
            marginLeft: '1.5rem',
            marginTop: '-1.13rem',
            color: 'red',
          }}
        >
          片尾，有一个彩蛋！
        </p>
      </div>
      <div
        className="demo-typography"
        style={{ width: '10.1rem', marginTop: '0.2rem' }}
      >
        <Typography.Text
          ellipsis={{
            rows: 3,
            collapseText: '收起',
            expandText: '展开',
          }}
        >
          {content}
        </Typography.Text>
      </div>
      <div className="peoples" style={{ width: '100%', height: '4.4rem' }}>
        <div
          className="yanzhi"
          style={{ color: 'white', marginTop: '0.5rem', fontSize: '0.4rem' }}
        >
          演职人员
        </div>
        <div
          className="quanbu"
          style={{ color: 'white', marginLeft: '8.5rem', marginTop: '-0.5rem' }}
        >
          全部
        </div>
        <div className="tupian">
          {actordata.map((item) => {
            return (
              <div className="box1" key={item._id}>
                <img
                  style={{ width: '100%', height: '3rem' }}
                  src={item.image}
                  alt=""
                />
                <p style={{ textAlign: 'center', color: 'white' }}>
                  {item.name}
                </p>
              </div>
            );
          })}
        </div>
      </div>
      <div
        className="videotj"
        style={{ width: '100%', height: '4.4rem', marginTop: '1.2rem' }}
      >
        <div
          className="shipin"
          style={{ color: 'white', marginTop: '0.5rem', fontSize: '0.4rem' }}
        >
          视频推荐
        </div>
        <div
          className="quanbua"
          style={{ color: 'white', marginLeft: '8.5rem', marginTop: '-0.5rem' }}
        >
          全部
        </div>
        <div className="shipintuijian">
          {videos.map((item) => {
            return (
              <div className="box2" key={item._id}>
                <img
                  style={{
                    width: '100%',
                    height: '3rem',
                    borderRadius: '0.5rem',
                  }}
                  src={item.paly_id.image}
                  alt=""
                  onClick={() => {
                    history.push({
                      pathname: '/video',
                      state: {
                        _id: item.paly_id._id,
                      },
                    });
                  }}
                />
                <p style={{ textAlign: 'center', color: '#fe4d60' }}>
                  {item.paly_id.name}
                </p>
              </div>
            );
          })}
        </div>
      </div>
      <div
        className="juzhao"
        style={{ width: '100%', height: '4.4rem', marginTop: '0.8rem' }}
      >
        {/* <div
          className="juzhaoa"
          style={{ color: 'white', marginTop: '0.5rem', fontSize: '0.4rem' }}
        >
          剧照
        </div> */}
        {/* <div
          className="juzhaol"
          style={{ color: 'white', marginLeft: '8rem', marginTop: '-0.3rem' }}
        >
          全部{images.length}张
        </div> */}
        <div className="juzhaos">
          {images.map((item) => {
            return (
              <div className="box3" key={item._id}>
                <img
                  style={{ width: '100%', height: '3rem' }}
                  src={item.image}
                  alt=""
                />
              </div>
            );
          })}
        </div>
      </div>
      <div
        className="duanping"
        style={{
          width: '100%',
          height: '3.5rem',
          backgroundColor: 'white',
          marginTop: '0.5rem',
        }}
      >
        <div
          className="dps"
          style={{
            width: '10rem',
            height: '1.5rem',
            fontSize: '0.5rem',
          }}
        >
          <div
            className="pf"
            style={{
              color: 'black',
              marginTop: '0.5rem',
              fontSize: '0.4rem',
              marginLeft: '0.5rem',
              padding: '0.3rem',
            }}
          >
            票房
          </div>
          <div
            className="pfa"
            style={{
              color: '#999999',
              marginLeft: '8.5rem',
              marginTop: '-0.8rem',
              fontSize: '0.3rem ',
            }}
          >
            票房详情
          </div>
        </div>
        <div
          className="paiming"
          style={{
            width: '90%',
            height: '2rem',
            backgroundColor: '#f8f8f8',
            borderRadius: '0.2rem',
            marginLeft: '0.5rem',
            marginTop: '-0.3rem',
            display: 'flex',
          }}
        >
          <div
            className="ghj"
            style={{ margin: '0.4rem 0.5rem 0 0.5rem', textAlign: 'center' }}
          >
            <p style={{ margin: '0' }}>2</p>
            <p className="zd">昨日排名</p>
          </div>
          <div
            className="ghj"
            style={{ margin: '0.4rem 0.5rem 0 0.5rem', textAlign: 'center' }}
          >
            <p style={{ margin: '0' }}>21,790</p>
            <p className="zd">首周票房(万)</p>
          </div>
          <div
            className="ghj"
            style={{ margin: '0.4rem 0.5rem 0 0.5rem', textAlign: 'center' }}
          >
            <p style={{ margin: '0' }}>86,689</p>
            <p className="zd">累计票房(万)</p>
          </div>
        </div>
        <div
          className="bot"
          style={{
            width: '100%',
            height: '8.4rem',
            backgroundColor: 'white',
            marginTop: '1rem',
          }}
        >
          <div
            className="bnv"
            style={{
              width: '10rem',
              height: '1rem',
              fontSize: '0.5rem',
              backgroundColor: 'white',
            }}
          >
            <div
              className="zixun"
              style={{
                color: 'black',
                marginTop: '0.5rem',
                fontSize: '0.4rem',
                marginLeft: '0.5rem',
                padding: '0.3rem',
              }}
            >
              相关资讯
            </div>
            <hr />
            <div
              className="mnb"
              style={{
                color: '#999999',
                marginLeft: '9rem',
                marginTop: '-0.8rem',
                fontSize: '0.3rem ',
              }}
            >
              全部
            </div>
          </div>
          <div
            className="lubushou"
            style={{
              width: '10.02rem',
              height: '3.5rem',
              backgroundColor: 'white',
              marginTop: '0.2rem',
            }}
          >
            <div
              className="nnnrrr"
              style={{
                width: '6rem',
                height: '3.5rem',
                backgroundColor: 'white',
              }}
            >
              <p
                style={{
                  marginBottom: '0.5rem',
                  paddingTop: '0.6rem',
                  fontSize: '0.4rem',
                  marginLeft: '0.3rem',
                }}
              >
                陆川执导电影《北京2022》今日公映 大银幕再赴冰雪之约
              </p>
              <p
                style={{
                  marginBottom: '0.5rem',
                  paddingTop: '-0.45rem',
                  fontSize: '0.4rem',
                  marginLeft: '0.3rem',
                }}
              >
                麻豆电影 4小时前
              </p>
            </div>
            <div
              className="imgggg"
              style={{
                width: '4.02rem',
                height: '3.5rem',
                marginLeft: '6rem',
                marginTop: '-3.5rem',
              }}
            >
              <img
                src={mm}
                alt=""
                style={{ padding: '0.6rem', marginTop: '-0.5rem' }}
              />
              <p style={{ paddingLeft: '0.6rem', marginTop: '-0.5rem' }}>
                <BrowsingHistory />
                136
              </p>
              <p style={{ marginLeft: '3rem', marginTop: '-0.39rem' }}>
                <Chat />0
              </p>
            </div>
          </div>
          <hr />
          <div
            className="lubushou"
            style={{ width: '10.02rem', height: '3.5rem', marginTop: '0.2rem' }}
          >
            <div
              className="hjhj"
              style={{
                width: '6rem',
                height: '3.5rem',
                backgroundColor: 'white',
              }}
            >
              <p
                style={{
                  marginBottom: '0.5rem',
                  paddingTop: '0.6rem',
                  fontSize: '0.4rem',
                  marginLeft: '0.3rem',
                }}
              >
                电影《北京2022》预售开启 曝群像海报每一位冬奥人都是主角
              </p>
              <p
                style={{
                  marginBottom: '0.5rem',
                  paddingTop: '-0.45rem',
                  fontSize: '0.4rem',
                  marginLeft: '0.3rem',
                }}
              >
                麻豆电影 4天前
              </p>
            </div>
            <div
              className="klghf"
              style={{
                width: '100%',
                height: '3.5rem',
                marginLeft: '6rem',
                marginTop: '-3.5rem',
              }}
            >
              <img
                src={jja}
                alt=""
                style={{ padding: '0.6rem', marginTop: '-0.5rem' }}
              />
              <p style={{ paddingLeft: '0.6rem', marginTop: '-0.5rem' }}>
                <BrowsingHistory />
                475
              </p>
              <p style={{ marginLeft: '3rem', marginTop: '-0.39rem' }}>
                <Chat />0
              </p>
            </div>
          </div>
        </div>
        <hr />
        <div
          className="bottomss"
          style={{
            width: '100%',
            height: '3rem',
            backgroundColor: '#f4f4f4',
          }}
        >
          <span
            style={{
              lineHeight: '3rem',
              fontSize: '0.1rem',
              marginLeft: '0.5rem',
            }}
          >
            影视行业信息 (免责声明)违法和不良信息举报电话：400601890
          </span>
          <Button
            block
            shape="rounded"
            color="warning"
            onClick={() => {
              history.push({
                pathname: '/ticketing',
                state: {},
              });
            }}
          >
            购票
          </Button>
        </div>
      </div>
    </div>
  );
}
